<!DOCTYPE html>
<html>
	<head>
		<title>CSS Reftest Reference</title>
		<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
		<style>
		.flow {
			color: gray;
		}
		.floater {
			width: 20%;
			height: 50px;
			background-color: lightblue;
		}
		.left {
			float: left;
		}
		.right {
			float: right;
		}
		.region {
			width: 250px;
			margin: 5px;
			border: 2px solid black;
		}
		</style>
	</head>
	<body>
		<div class="dummy-bfc">
		</div>

		<p>
			Test passes if you see some filler gray text and three blue squares inside a black-bordered
			rectangle. One blue square should be in the top left corner, another in the top right
			corner and the third one should be somewhere along the left border, below the top-left
			one.<br>
			Test fails is you see any red.
		</p>

		<div class="region">
			<div class="flow floater left"></div>
			<div class="flow">
				<div class="floater right"></div>
				This is filler text. This is filler text. This is filler text. This is filler text. This
				is filler text. This is filler text. This is filler text. This is filler text. This is
				filler text. This is filler text. This is filler text. This is filler text. This is
				filler text. This is filler text. This is filler text. This is filler text. This is
				<div class="floater left"></div>
				filler text. This is filler text. This is filler text. This is filler text. This is
				filler text. This is filler text. This is filler text. This is filler text. 
			</div>
		</div>
	</body>
</html>